<!--  线 + 柱混合图 -->
<template>
  <div class="box">
    <div class="title-area">
      <div class="top-title">
        <div>南京紫云智慧广场店</div>
        <div class="img">
          <svg-icon icon-class="document" />
        </div>
        <div class="tag-box">疫情低风险运营</div>
      </div>
      <div class="bottom-title">常规店</div>
    </div>

    <!--运营信息-->
    <div class="operate-area">
      <div class="operate-item">
        <div class="operate-item-title">运营时长</div>
        <div class="operate-item-value">
          <span>695 <span class="operate-unit">天</span></span>
        </div>
      </div>
      <div class="operate-item">
        <div class="operate-item-title">营业时间</div>
        <div class="operate-item-value">
          <span>7:00-22:00</span>
        </div>
      </div>
      <div class="operate-item">
        <div class="operate-item-title">设备数量</div>
        <div class="operate-item-value">
          <span>32 <span class="operate-unit">台</span></span>
        </div>
      </div>
      <div class="operate-item">
        <div class="operate-item-title">店长</div>
        <div class="operate-item-value">
          <span>阮鑫</span>
        </div>
      </div>
    </div>

    <div class="status-area">
      <div class="status-title">防控疫情状态</div>
      <div class="status-bottom">
        <div class="status-item">
          <div class="status-item-title">
            <span class="status-line"></span>低风险
          </div>
          <div class="status-item-value">
            <span>695 <span class="operate-unit">天</span></span>
          </div>
        </div>
        <div class="status-item">
          <div class="status-item-title">
            <span class="status-line"></span>低风险
          </div>
          <div class="status-item-value">
            <span>695 <span class="operate-unit">天</span></span>
          </div>
        </div>
        <div class="status-item">
          <div class="status-item-title">
            <span class="status-line"></span>中风险
          </div>
          <div class="status-item-value">
            <span>695 <span class="operate-unit">天</span></span>
          </div>
        </div>
        <div class="status-item">
          <div class="status-item-title">
            <span class="status-line"></span>高风险
          </div>
          <div class="status-item-value">
            <span>695 <span class="operate-unit">天</span></span>
          </div>
        </div>
      </div>
    </div>

    <div class="machine-area">
      <div class="machine-title">向绿运营</div>
      <div class="machine-bottom">
        <div class="machine-item">
          <div class="machine-item-title">设备数量</div>
          <div class="machine-item-value">111</div>
        </div>
        <div class="machine-item">
          <div class="machine-item-title">设备数量</div>
          <div class="machine-item-value">111</div>
        </div>
        <div class="machine-item">
          <div class="machine-item-title">设备数量</div>
          <div class="machine-item-value">111</div>
        </div>
        <div class="machine-item">
          <div class="machine-item-title">设备数量</div>
          <div class="machine-item-value">111</div>
        </div>
      </div>
    </div>

    <div class="line-area">
      <div class="line-title">
        <div class="left">
          <div class="line-small-title">单杯能耗</div>
          <div class="line-data-title">
            1.35kgCO₂e/ <span><svg-icon icon-class="coffee" /></span>
            <span><svg-icon icon-class="down" /></span
            ><span class="percent">3.8%</span>
          </div>
        </div>
      </div>

      <div :id="id" style="height: 260px"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, watchEffect } from "vue";
import { useAppStore } from "@/store";
import { useResizeObserver } from "@vueuse/core";

const props = defineProps({
  id: {
    type: String,
    default: "shop",
  },
});

// echarts配置
const options = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: 35,
    right: 0,
    // bottom:'middle'
  },
  title: {
    // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
    subtext: "kgCO₂e",
    left: 3, // 距离左边位置
    top: 20, // 距离上面位置
    subtextStyle: {
      // 设置二级标题的样式
      color: "#9da9ab",
      fontSize: "10",
    },
  },
  legend: {
    data: ["2021","2022","2023"],
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20,
    x: 170,
    y:20,
    textStyle: {
      color: "#aeb8b9",
      fontSize: 9,
    },
  },

  xAxis: {
    splitLine: {
      show: false,
    },
    axisTick: {
      //坐标轴刻度
      show: false,
    },
    axisLine: {
      //坐标轴轴线
      show: false,
    },
    axisLabel: {
      margin: 15,
      interval: 0, // 设置为 0 强制显示所有标签
      textStyle: {
        fontSize: 10,
        color: "#aeb8b9",
      },
    },
    type: "category",
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
  },

  yAxis: {
    splitLine: {
      lineStyle: {
        type: "dashed", // 设置虚线类型
        color: "#505555",
      },
    },
    interval: 0.5,
    type: "value",
    axisLabel: {
      margin: 8, // 调整标签与轴线之间的距离
    },
    axisLabel: {
      interval: 0, // 设置为 0 强制显示所有标签
      textStyle: {
        fontSize: 10,
        color: "#aeb8b9",
      },
    },
  },
  series: [
    {
      name: "2021",
      type: "line",
      smooth: 0.3,
      stack: "总量",
      data: [0.3, 0.6, 1.3, 0.5, 0.4, 0.6, 1.3, 1.6, 1.2, 0.4, 0.7, 0.1],
      itemStyle: {
        color: "#f7ff11",
      },
    },
    {
      name: "2022",
      type: "line",
      smooth: 0.3,
      stack: "总量",
      data: [0.3, 0.5, 0.4, 0.6, 1.3, 0.6, 1.3, 1.6, 1.2, 0.4, 0.7, 0.1],
      itemStyle: {
        color: "#00bf80",
      },
    },
    {
      name: "2023",
      type: "line",
      smooth: 0.3,
      stack: "总量",
      data: [0.3, 0.5, 0.4, 0.6, 1.3, 0.6, 1.3, 1.6, 1.2, 0.4, 0.7, 0.1],
      itemStyle: {
        color: "#00bf80",
      },
    },
  ],
};
const chart = ref<any>("");

onMounted(() => {
  // 图表初始化
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  nextTick(() => {
    // 要放在对响应式数据修改之后
    chart.value.setOption(options);
  });

  // 大小自适应
  window.addEventListener("resize", () => {
    console.log("变化");
    chart.value.resize();
  });
});

//图标重置
function resize() {
  if (chart.value) {
    chart.value.resize();
  }
}

watchEffect(() => {
  nextTick(() => {
    useResizeObserver(document.getElementById(props.id), () => {
      resize();
    });
  });
});
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  border-radius: 16px;
  padding: 20px 25px;
  background-color: #293030;
  width: 100%;
  height: 100%;

  .title-area {
    .top-title {
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .img {
        font-size: 16px;
      }

      .tag-box {
        font-size: 12px;
        color: #14be76;
        background-color: #3f4847;
        padding: 4px 6px;
        border-radius: 5px;
      }
    }

    .bottom-title {
      font-size: 14px;
      margin-top: 10px;
    }
  }

  .operate-area {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .operate-item {
      .operate-item-title {
        color: #9da9ab;
        font-size: 12px;
        margin-bottom: 7px;
      }

      .operate-item-value {
        font-size: 17px;

        .operate-unit {
          font-size: 12px;
        }
      }
    }
  }

  .status-area {
    margin-top: 20px;
    border-bottom: 2px dashed hsla(0, 0%, 100%, 0.18);
    padding-bottom: 15px;

    .status-bottom {
      margin-top: 7px;
      display: flex;
      justify-content: space-between;

      .status-item {
        .status-item-title {
          color: #9da9ab;
          font-size: 12px;
          margin-bottom: 5px;
          display: flex;
          align-items: center;

          .status-line {
            display: inline-block;
            width: 3px;
            height: 12px;
            margin-right: 3px;
          }
        }
      }

      .status-item:nth-child(1) .status-line {
        background-color: green;
      }

      .status-item:nth-child(2) .status-line {
        background-color: red;
      }

      .status-item:nth-child(3) .status-line {
        background-color: yellow;
      }

      .status-item:nth-child(4) .status-line {
        background-color: orange;
      }

      .status-item-value {
        font-size: 17px;

        .status-unit {
          font-size: 12px;
        }
      }
    }
  }

  .machine-area {
    border-bottom: 2px dashed hsla(0, 0%, 100%, 0.18);
    padding-bottom: 15px;

    .machine-title {
      margin-top: 20px;
    }

    .machine-bottom {
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);

      .machine-item {
        .machine-item-title {
          color: #9da9ab;
          font-size: 12px;
          margin-bottom: 5px;
        }
      }

      .machine-item:nth-child(1) {
        border-right: 0.5px solid #4b4f4f;
        border-bottom: 0.5px solid #4b4f4f;
        padding: 0 20px 20px 0;
      }

      .machine-item:nth-child(2) {
        border-left: 0.5px solid #4b4f4f;
        border-bottom: 0.5px solid #4b4f4f;
        padding: 0px 0 20px 20px;
      }

      .machine-item:nth-child(3) {
        border-right: 0.5px solid #4b4f4f;
        border-top: 0.5px solid #4b4f4f;
        padding: 20px 0 0px 0px;
      }

      .machine-item:nth-child(4) {
        border-top: 0.5px solid #4b4f4f;
        border-left: 0.5px solid #4b4f4f;
        padding: 20px 0 0px 20px;
      }
    }
  }

  .line-area {
    margin-top: 20px;

    .percent {
      color: red;
      font-size: 14px;
    }

    .line-data-title {
      font-size: 18px;
      margin-top: 5px;
    }

    .line-small-title {
      color: #9da9ab;
      font-size: 12px;
    }
  }
}
</style>
